<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <div id="app">
        <h1>ToDoList</h1>
        <div>
            <input type="text" v-model="ipt">
            <button @click="hanlder">添加</button>
        </div>
        <h2>没有完成的任务</h2>
        <div v-if="isShow" v-for="(item,index) in msg">
            <input type="checkbox" @click="handle(index)">{{item}}
            <button @click="del(index)">删除</button>
        </div>
        <h2>已完成完成的任务</h2>
        <div v-for="(item,index) in msg">
            <span v-if="item.flag">{{item.item}}</span>
        </div>
    </div>
</body>
<script src="./vue.js"></script>
<script>
    let vm = new Vue({
        el: '#app',
        data: {
            ipt: '',
            msg: [],
            isShow: false,
            flag: false
        },
        methods: {
            hanlder() {
                if (this.ipt != '') {
                    this.msg.push(this.ipt)
                    this.isShow = true
                    this.ipt = ''
                }
            },
            del(i) {
                this.msg = this.msg.filter(function(item, index) {
                    return i != index
                })
            },
            handle(i) {
                this.msg[i].flag = !this.msg[i].flag
            }
        },
    })
</script>

</html>